<template>
    <a-menu theme="light" v-model:selectedKeys="current" mode="horizontal" @click="handelClick">
        <a-menu-item :key="item.key" v-for="item, index in menu">
            <template #icon>
                <component :is="item.icon"></component>
            </template>
            {{ item.text }}
        </a-menu-item>

        <a-menu-item v-if="!isLoginStaus()" @click="push({ name: 'appuser' })">
            登录 / 注册
        </a-menu-item>

        <a-sub-menu v-else>
            <template #icon>
                <a-avatar :src="user.getUserInfo.user_img" />
            </template>
            <template #title>{{ user.getUserInfo.user_name }}</template>
            <a-menu-item-group>
                <a-menu-item>自定义展示的下拉信息....</a-menu-item>
                <a-menu-item key="/admin/home" v-if="user.getUserInfo.user_type == 1">进入管理后台</a-menu-item>
            </a-menu-item-group>
          
        </a-sub-menu>


    </a-menu>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref, reactive, onMounted } from 'vue';
import { MailOutlined } from '@ant-design/icons-vue';
import { VagueOject } from '@/types/common';
import { push } from "@/router";
import { isLoginStaus, getItem } from "@/utils";
import { useUserStore } from "@/state/user";

// const { getUserInfo } = storeToRefs(useUserStore())
// const { setUserInfo } = useUserStore()
const user = useUserStore()

withDefaults(defineProps<{
    menu: VagueOject[]
}>(), {
    menu: () => []
})

onMounted(() => {
    // TODO 这行在登录写完后需要删除
    user.setUserInfo(getItem("userinfo")) 
    console.log("getUserInfo: ", user.getUserInfo);

})

const handelClick = (item: any) => {
    push(item.key)
}

const current = ref<string[]>(['mail']);
</script>